<template>
	<div class="bg-[#fff] " :style="'border: 2px solid ' + color + ';'">

		<div class="w-full flex h-10 px-2 relative" :style="'background:' + color + ';'">
			<div class="leading-10 text-[#fafafa]">{{ name }}</div>
			<div class="flex leading-10 absolute right-2">
				<div class="pt-2 pl-4 cursor-pointer" v-prmis="'home_exportMachineList'" v-if="type == 1">
					<SvgIcon name="download" color="#fff" width="20px" height="20px" @click="rankings(1)" />
				</div>
				<div class="pt-2 pl-4 cursor-pointer" v-prmis="'home_exportGoodsList'"  v-if="type == 2">
					<SvgIcon name="download" color="#fff" width="20px" height="20px" @click="rankings(2)" />
				</div>
				<div class="pt-2 pl-4 cursor-pointer">
					<SvgIcon name="goto" color="#fff" width="20px" height="20px" @click="toDetails(type)" />
				</div>
			</div>
		</div>

		<el-table :data="list" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
			class="w-full">
			<mactable v-if="type == 1" />
			<gostable v-if="type == 2" />
		</el-table>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false"/>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import { ElMessage, ElMessageBox } from "element-plus";
import { exportMachineList,exportGoodsList } from '@/api/home'
import gostable from './gostable.vue';
import mactable from './mactable.vue';
import { useRouter } from "vue-router";
import exports from '@/components/export.vue';
import {ref} from 'vue'
const router = useRouter()
const dialogExport = ref(false)
let props = defineProps({
	list: {
		type: Array,
		default: []
	},
	name: {
		type: String,
		default: ''
	},
	color: {
		type: String,
		default: ''
	},
	type: {
		type: Number,
		default: 3
	}
})

let toDetails = (type) => {
	let today = new Date();
	var dates = [];
	for (var i = 0; i < 7; i++) {
		// 计算日期差值，向前推算日期
		var diff = new Date(today);
		diff.setDate(today.getDate() - i);
		dates.push(diff);
	}
	let startYear = dates[0].getFullYear()
	let startMonth = dates[0].getMonth() + 1
	let startDay = dates[0].getDate()
	if (startMonth < 10) {
		startMonth = '0' + startMonth
	}
	if (startDay < 10) {
		startDay = '0' + startDay
	}
	let end = startYear + '-' + startMonth + '-' + startDay
	let endYear = dates[dates.length - 1].getFullYear()
	let endMonth = dates[dates.length - 1].getMonth() + 1
	let endDay = dates[dates.length - 1].getDate()
	if (endMonth < 10) {
		endMonth = '0' + endMonth
	}
	if (endDay < 10) {
		endDay = '0' + endDay
	}
	let start = endYear + '-' + endMonth + '-' + endDay
	let query = {
		start: start,
		end: end
	}
	router.push({ path: '/report/sales', query: query })
}
// 导出排行榜
let rankings = (e) => {
	if (e == 1) {
		// 导出设备
		setmaclist()
	} else {
		// 导出商品
		setgodslist()
	}
}

// 导出排行榜中的设备
let setmaclist = () => {
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportMachineList({}).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	})
}

// 导出排行榜中的商品
let setgodslist = () => {
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportGoodsList({}).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	})
}

</script>
